<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Web UI Kit &amp; Dashboard Template based on Bootstrap">
    <meta name="author" content="AdminKit">
    <meta name="keywords" content="adminkit, bootstrap, web ui kit, dashboard template, admin template">

    <link rel="shortcut icon" th:href="@{/img/icons/icon-48x48.png}" />

    <title>员工管理</title>

    <link th:href="@{/css/app.css}" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <!-- 侧边栏 -->
        <div th:replace="~{common/common::sidebar(active='employee')}"></div>
        <div class="main">
            <!-- 导航栏 -->
            <div th:replace="~{common/common::navbar}"></div>
            <!-- 内容 -->
            <main class="content">
            <div class="container-fluid p-0">
                <div class="row mb-2 mb-xl-3">
                    <div class="col-auto d-none d-sm-block">
                        <h3><strong>Analytics</strong> Dashboard</h3>
                    </div>
                    <div class="col-auto ml-auto text-right mt-n1">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb bg-transparent p-0 mt-1 mb-0">
                                <li class="breadcrumb-item"><a href="#">AdminKit</a></li>
                                <li class="breadcrumb-item"><a href="#">Dashboards</a></li>
                                <li class="breadcrumb-item active" aria-current="page">员工管理</li>
                            </ol>
                        </nav>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <a class="btn btn-success" data-toggle="modal" href="#" data-target="#myModal">
                                    <i class="align-middle" data-feather="plus"></i>
                                    <span class="align-middle">添加</span>
                                </a>
                                <!-- 添加员工模态框 -->
                                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title" id="myModalLabel">添加员工</h4>
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            </div>
                                            <div class="modal-body">
                                                <table>
                                                    <thead>
                                                        <tr>
                                                            <th>姓名</th>
                                                            <td>
                                                                <input type="text" />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>年龄</th>
                                                            <td>
                                                                <input type="text" />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>籍贯</th>
                                                            <td>
                                                                <input type="text" />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>身份证</th>
                                                            <td>
                                                                <input type="text" />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>现居地址</th>
                                                            <td>
                                                                <input type="text" />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>电话</th>
                                                            <td>
                                                                <input type="text" />
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th>部门</th>
                                                            <td>
                                                                <input type="text" />
                                                            </td>
                                                        </tr>
                                                        </tr>
                                                    </thead>
                                                </table>
                                            </div>
                                            <div class="modal-footer">
                                                <a class="btn btn-success" href="#">
                                                    <i class="align-middle" data-feather="check"></i>
                                                    <span class="align-middle">确定</span>
                                                </a>
                                                <a class="btn btn-primary" href="#" data-dismiss="modal">
                                                    <i class="align-middle" data-feather="x"></i>
                                                    <span class="align-middle">取消</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <input type="text" placeholder="员工编号…">
                                <a class="btn btn-pill btn-secondary" href="#">
                                    <i class="align-middle" data-feather="search"></i>
                                    <span class="align-middle">搜索</span>
                                </a>
                            </div>
                            
                            <table class="table table-hover my-0">
                                <thead>
                                    <tr>
                                        <th>员工编号</th>
                                        <th>姓名</th>
                                        <th>年龄</th>
                                        <th>籍贯</th>
                                        <th>身份证</th>
                                        <th>现居地址</th>
                                        <th>电话</th>
                                        <th>部门</th>
                                        <th>入职时间</th>
                                        <th colspan="2">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:each="emp:${employeeAll}">
                                        <td th:text="${emp.id}"></td>
                                        <td th:text="${emp.name}"></td>
                                        <td th:text="${emp.age}"></td>
                                        <td th:text="${emp.nativePlace}"></td>
                                        <td th:text="${emp.identityCard}"></td>
                                        <td th:text="${emp.address}"></td>
                                        <td th:text="${emp.phone}"></td>
                                        <td th:text="${emp.department.departmentName}"></td>
                                        <td th:text="${emp.entryTime}"></td>
                                        <td>
                                            <a class="btn btn-primary" href="#">
                                                <i class="align-middle" data-feather="edit"></i>
                                                <span class="align-middle">修改</span>
                                            </a>
                                        </td>
                                        <td>
                                            <a class="btn btn-danger" href="#">
                                                <i class="align-middle" data-feather="x"></i>
                                                <span class="align-middle">删除</span>
                                            </a>
                                        </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </main>
            <!-- 底部栏 -->
            <div th:replace="~{common/common::footer}"></div>
        </div>
    </div>

    <script src="js/vendor.js"></script>
    <script src="js/app.js"></script>
</body>
</html>